<template>
    <div class="app-container">
      <div>
        <YJ_table
          :minWidth="minWidth"
          :tableData="listData"
          :columList="defaultColumn"
          :options="options"
          :isShowSelection="true"
          :pageNum.sync="queryParams.pageNum"
          :pageSize="queryParams.pageSize"
          :formatters="formatters"
          @dispose="dispose"
          @previewUser="previewUser"
          @previewLog="previewLog"
          @forbidden="forbidden"
          @previewFile="previewFile"
        >
        </YJ_table>
      </div>
    </div>
  </template>
    
    <script>
    import YJ_table from "./component/YJ_table.vue";
  import {
    getFeedbackList,
    getUserPlatformList,
    updateFeedback,
  } from "@/api/feedback_back/index.js";
  import previewFile from "@/components/previewFile/index.vue";
  export default {
    components: { previewFile, YJ_table },
    data() {
      return {
        isIndeterminate: true,
        checkAll: false,
        moduleList: [],
        checkedModuleList: [],
        selectUser: null,
        selectOptions1: [],
        selectOptions3: [],
        // 弹窗变量
        suggest_dialog: false,
        issue_dialog: false,
        userDetail_dialog: false,
        file_dialog: false,
        user_dialog: false,
        file: "",
  
        // 弹窗变量
        // 状态枚举
        suggestOptions: [
          {
            value: 1,
            name: "产品已查看功能讨论中，未回复",
          },
          {
            value: 2,
            name: "意见未采纳，已回复",
          },
          {
            value: 3,
            name: "意见已纳入规划，已回复",
          },
          {
            value: 4,
            name: "功能已上线，已回复",
          },
        ],
        issueOptions: [],
        // 状态枚举
        suggest_form: {
          state: null,
          replyContent: null,
        },
        issue_form: {
          state: null,
          replyContent: null,
        },
        id: "",
        // 规则
        rules1: {
          state: [
            {
              required: true,
              message: "请选择状态",
              trigger: "blur",
            },
          ],
        },
        rules2: {
          state: [
            {
              required: true,
              message: "请选择状态",
              trigger: "blur",
            },
          ],
        },
        // 规则
        // 用户详情
        userDetail: {},
        // 搜索
        queryParams: {
          userId: this.$store.state.user.user.userId,
          pageNum: 1,
          pageSize: 10,
        },
        selectOptions: [
          {
            label: "优化建议",
            value: 1,
          },
          {
            label: "使用问题",
            value: 2,
          },
        ],
        minWidth: 100,
        ids: [],
        // 非多个禁用
        multiple: true,
        listData: [],
        defaultColumn: [
          {
            name: "反馈类型",
            prop: "type",
            isShow: true,
            isFormats: true,
          },
          {
            name: "反馈内容",
            prop: "content",
            isShow: true,
            isImg: true,
          },
  
          {
            name: "反馈时间",
            prop: "createTime",
            isShow: true,
          },
          {
            name: "平台",
            prop: "platformName",
            isShow: true,
          },
          {
            name: "模块",
            prop: "platformModule",
            isShow: true,
          },
          {
            name: "状态",
            prop: "state",
            isShow: true,
            isFormats: true,
          },
          {
            name: "回复内容",
            prop: "replyContent",
            isShow: true,
            isImg: true,
          },
          {
            name: "最后处理时间",
            prop: "disposeTime",
            isShow: true,
          },
          {
            name: "用户账号",
            prop: "createBy",
            isShow: true,
          },
        ],
        roleType: null,
        formatters: {
          type: [
            {
              name: "优化建议",
              value: 1,
            },
            {
              name: "使用问题",
              value: 2,
            },
          ],
          state: [
            {
              name: "未查看",
              value: 0,
            },
            {
              name: "产品已查看功能讨论中，未回复",
              value: 1,
            },
            {
              name: "意见未采纳，已回复",
              value: 2,
            },
            {
              name: "建议已纳入规划，已回复",
              value: 3,
            },
            {
              name: "功能已上线，已回复",
              value: 4,
            },
            {
              name: "运营已查看，确认无问题，已回复",
              value: 5,
            },
            {
              name: "运营已查看，确认有问题，提交给测试",
              value: 6,
            },
            {
              name: "测试已查看，确认无问题，已回复",
              value: 7,
            },
            {
              name: "测试已查看，确认有问题，提交给开发，已回复",
              value: 8,
            },
            {
              name: "开发已解决，已回复",
              value: 9,
            },
          ],
          roleType: [
            {
              name: "超级管理员",
              value: 0,
            },
            {
              name: "运营管理员",
              value: 1,
            },
            {
              name: "产品经理",
              value: 2,
            },
            {
              name: "测试负责人",
              value: 3,
            },
          ],
        },
        options: [
          {
            name: "查看处理记录",
            class: "edit",
            option: "previewLog",
            span: 5,
          },
          {
            name: "查看用户详情",
            class: "edit",
            option: "previewUser",
            span: 5,
          },
          {
            name: "处理",
            class: "edit",
            option: "dispose",
            span: 5,
            isFuntion: true,
            optionFun: "forbidden",
          },
          {
            name: "查看附件",
            class: "edit",
            option: "previewFile",
            span: 5,
          },
        ],
        total: 0,
        // 学习者管理
      };
    },
    methods: {
      // 获取平台列表
      getPlatformList() {
        getUserPlatformList().then((res) => {
          console.log(res);
          this.selectOptions1 = res.data;
        });
      },
      // 查看处理记录
      previewLog(val) {
        this.$router.push({
          path: "/userFeedbackManageLog",
          query: {
            id: val.id,
          },
        });
      },
      // 查看用户详情
      previewUser(val) {
        console.log(val);
        this.userDetail = val;
        this.user_dialog = true;
      },
      //
      // 获取反馈列表
      getList() {
        getFeedbackList(this.queryParams).then((res) => {
          console.log(res);
          this.listData = res.rows;
          this.total = res.total;
        });
      },
      // 根据反馈类型加载不同的反馈状态
      handleChange(val) {
        if (val == 1) {
          this.selectOptions3 = [
            {
              name: "未查看",
              value: 0,
            },
            {
              name: "产品已查看功能讨论中，未回复",
              value: 1,
            },
            {
              name: "意见未采纳，已回复",
              value: 2,
            },
            {
              name: "建议已纳入规划，已回复",
              value: 3,
            },
            {
              name: "功能已上线，已回复",
              value: 4,
            },
          ];
        } else if (val == 2) {
          this.selectOptions3 = [
            {
              name: "未查看",
              value: 0,
            },
            {
              name: "运营已查看，确认无问题，已回复",
              value: 5,
            },
            {
              name: "运营已查看，确认有问题，提交给测试",
              value: 6,
            },
            {
              name: "测试已查看，确认无问题，已回复",
              value: 7,
            },
            {
              name: "测试已查看，确认有问题，提交给开发，已回复",
              value: 8,
            },
            {
              name: "开发已解决，已回复",
              value: 9,
            },
          ];
        } else {
          this.selectOptions3 = [];
        }
      },
      // 优化建议处理
      submitSuggest(v) {
        this.$refs[v].validate((valid) => {
          if (valid) {
            console.log(valid);
            this.suggest_form.feedbackId = this.id;
            console.log(this.suggest_form);
            updateFeedback(this.suggest_form).then((res) => {
              if (res.code == 200) {
                (this.suggest_form.replyContent = null),
                  (this.suggest_form.state = null);
                this.suggest_form.id = null;
                this.$modal.msgSuccess("处理完成！");
                this.suggest_dialog = false;
                this.getList();
              }
            });
          }
        });
      },
      submitIssue(v) {
        this.$refs[v].validate((valid) => {
          if (valid) {
            console.log(valid);
            this.issue_form.feedbackId = this.id;
            updateFeedback(this.issue_form).then((res) => {
              if (res.code == 200) {
                (this.issue_form.replyContent = null),
                  (this.issue_form.state = null);
                this.issue_form.id = null;
                this.$modal.msgSuccess("处理完成！");
                this.issue_dialog = false;
                this.getList();
              }
            });
          }
        });
      },
      // 搜索
      handleQueryUser() {
        this.getList();
      },
      clearOptions() {
        this.getList();
      },
      // 表单重置
      reset() {
        this.form = {};
        this.resetForm("form");
      },
  
      // 处理
      async dispose(row) {
        console.log(row);
        if (row.type == 1) {
          this.suggest_dialog = true;
          this.id = row.id;
        } else if (row.type == 2) {
          this.issue_dialog = true;
          this.id = row.id;
        } else {
          return;
        }
      },
  
      // 灰色处理
      forbidden(row, callback) {
        if (this.$store.state.user.user.roleType == 1) {
          callback(true);
        } else if (this.$store.state.user.user.roleType == 2 && row.type == 1) {
          callback(true);
        } else if (this.$store.state.user.user.roleType == 3 && row.type == 2) {
          callback(true);
        } else {
          callback(false);
        }
      },
      // 查看附件
      previewFile(row) {
        if (row.file) {
          this.file_dialog = true;
          this.file = row.file;
        } else {
          this.$message({
            type: "error",
            message: "暂无附件",
          });
        }
      },
      handleCheckAllChange(val) {
        console.log(val);
        this.checkedModuleList = val ? this.moduleList : [];
        console.log(this.checkedModuleList);
        this.isIndeterminate = false;
      },
      changeModule(val) {
        console.log(val);
        this.checkedModuleList = val;
        let checkedCount = val.length;
        this.checkAll = checkedCount == this.moduleList.length;
        this.isIndeterminate =
          checkedCount > 0 && checkedCount < this.moduleList.length;
      },
      cancelSuggest() {
        this.suggest_dialog = false;
      },
      cancelIssue() {
        this.issue_dialog = false;
      },
      cancelFile() {
        this.file_dialog = false;
        this.file = {};
      },
      cancelUser() {
        this.user_dialog = false;
        this.userDetail = {};
      },
      // 批量删除项目成员管理
    },
    created() {
      console.log(this.$store.state.user.user.roleType);
      if (this.$store.state.user.user.roleType == 1) {
        this.issueOptions = [
          {
            value: 5,
            name: "运营已查看，确认无问题，已回复",
          },
          {
            value: 6,
            name: "运营已查看，确认有问题，提交给测试",
          },
        ];
      } else if (this.$store.state.user.user.roleType == 3) {
        this.issueOptions = [
          {
            value: 7,
            name: "测试已查看，确认无问题，已回复",
          },
          {
            value: 8,
            name: "测试已查看，确认有问题，提交给开发，已回复",
          },
          {
            value: 9,
            name: "开发已解决，已回复",
          },
        ];
      }
      this.getPlatformList();
      this.getList();
    },
    previewLog() {},
  };
  </script>
    
    <style lang="scss" scoped>
  ::v-deep .edit {
    margin-left: 0;
  }
  
  .menu {
    width: 100%;
    height: 50px;
    border-bottom: 1px solid #f6f6f6;
    line-height: 50px;
  
    div {
      float: left;
      padding: 0 20px;
      cursor: pointer;
    }
  }
  
  .activeTab {
    color: #145fdf;
    border-bottom: 2px solid #145fdf;
  }
  
  .searchOption {
    margin-top: 20px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
  
    .el-input {
      margin-right: 10px;
    }
  }
  
  .studyOp {
    margin-bottom: 0;
  }
  
  .dialog {
    margin-top: 100px !important;
  }
  
  .openTab {
    border-left: 2px solid #145fdf;
    padding: 0 10px;
  }
  
  .line {
    margin-top: 18px;
    margin-bottom: 20px;
    width: 100%;
    height: 1px;
    background: #e6e6e6;
  }
  ::v-deep .el-checkbox-group {
    height: 200px;
    .el-checkbox {
      margin-bottom: 10px;
    }
  }
  
  .user {
    font-size: 14px;
    font-family: SourceHanSansCN, SourceHanSansCN;
    font-weight: 400;
    color: #333333;
    p {
      display: inline-block;
      width: 120px;
      text-align: end;
      font-size: 14px;
      font-family: SourceHanSansCN, SourceHanSansCN;
      font-weight: 700;
      color: #333333;
      margin-right: 15px;
    }
  }
  </style>
    